<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;padding: 50px 0;border: solid 1px black;}
        .xbox{width:200px;height:200px;border: solid 1px black;}
    </style>
</head>
<body>
    <div class="box">
        <dl>
            <dt>这是宏任务1</dt>
            <dd>console.log("script 开始");</dd>
            <dd>for(var i=0;i<10;i++){console.log(i);}</dd>
            <dd>i = 20;console.log(i);</dd>
            <dd style="background:orange;">setTimeout开启了一个新的宏任务</dd>
            <dd>console.log(i);</dd>
            <dd style="background:orange;">setTimeout开启了一个新的宏任务</dd>
            <dd>console.log(i);</dd>
            <dd>console.log("script 结束");</dd>
        </dl>
        <div class="xbox">
            <dl>
                <dt>这是宏任务2</dt>
                <dd style="background: #3f3;">这是setTimeout开启的宏任务</dd>
                <dd style="background: #9f9;">这是setTimeout开启的宏任务</dd>
            </dl>
        </div>
    </div>
</body>
<script>
    console.log("script 开始");     // 1

    for(var i=0;i<10;i++){
        console.log(i);             // 2
    }
    i = 20;
    console.log(i);                 // 3

    setTimeout(()=>{
        i = 30;
        console.log(i);             // 7
    }, 0)
    
    console.log(i);                 // 4
    
    setTimeout(function(){
        i = 40;
        console.log(i);             // 8
    })
    
    console.log(i);                 // 5

    console.log("script 结束");      // 6
</script>
</html>